<!DOCTYPE html>
<html>
<head>
    <title>menu form</title>
    <#include "/header.html">
    <link rel="stylesheet" href="${request.contextPath}/statics/js/lay-module/dtree/dtree.css" media="all">
    <link rel="stylesheet" href="${request.contextPath}/statics/js/lay-module/dtree/font/dtreefont.css" media="all">
    <style>
        .layui-iconpicker {
            max-width: 420px!important;
        }
        .layui-iconpicker .layui-anim {
            max-height: 360px!important;
            font-size: 18px;
        }
    </style>
</head>
<body class="bg-white">

<div id="appMain">
    <form class="layui-form layuimini-form" action="" lay-filter="dataForm">
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="0" title="目录" lay-filter="menuType">
                <input type="radio" name="type" value="1" title="菜单" lay-filter="menuType" checked="">
                <input type="radio" name="type" value="2" title="按钮" lay-filter="menuType">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" lay-reqtext="名称不能为空" placeholder="菜单名称" value="" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">上级</label>
            <div class="layui-input-block">
                <div id="menuTree" class="dtree" data-id="0" ></div>
            </div>
        </div>
        <div class="layui-form-item menu-icon">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-block">
                <input type="text" name="icon" id="iconPicker" lay-filter="iconPicker" class="hide">
            </div>
        </div>
        <div class="layui-form-item menu-route">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-block">
                <input type="text" name="url" placeholder="菜单路由URL" value="" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item menu-perms">
            <label class="layui-form-label">权限标识</label>
            <div class="layui-input-block">
                <input type="text" name="perms" placeholder="多个用逗号分隔, 如: user:list,user:create" value="" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item menu-order">
            <label class="layui-form-label">排序号</label>
            <div class="layui-input-block">
                <input type="text" name="orderNum" placeholder="排序号" value="0" class="layui-input" autocomplete="off">
            </div>
        </div>

        <div class="layui-hide">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" id="commitBtn" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">
    layui.use(['form', 'dtree', 'iconPickerFa'], function () {
        var form = layui.form,
            dtree = layui.dtree,
            iconPickerFa = layui.iconPickerFa,
            $ = layui.$;

        var _parent = parent;
        dtree.render({
            elem: "#menuTree",
            data: _parent.menuTreeData,
            icon: "-1",
            selectInputName: {
                nodeId: "parentId",
                context: "parentName"
            },
            // initLevel: 3,
            select: true, //指定下拉树模式
            done: function(res, $ul, first){
                if(first && _parent.formDataId > 0) {
                    $.ajax({
                        type: "POST",
                        url: serverUrl('sys/menu/info/' + _parent.formDataId),
                        success: function (result) {
                            if (result.code === 0) {
                                form.val('dataForm', {
                                    "name": result.menu.name,
                                    "type": result.menu.type,
                                    "icon": result.menu.icon == null ? '' : result.menu.icon.substring(3),
                                    "url": result.menu.url,
                                    "perms": result.menu.perms,
                                    "orderNum": result.menu.orderNum
                                });
                                dtree.dataInit("menuTree", result.menu.parentId);
                                dtree.selectVal("menuTree");
                                typeTplUpdate(result.menu.type);
                                form.render();
                            }
                            iconRender();
                        }
                    });
                } else {
                    iconRender();
                }
            }
        });

        //图标选择器
        var iconRender = function() {
            iconPickerFa.render({
                elem: '#iconPicker',
                url: "${request.contextPath}/statics/lib/font-awesome-4.7.0/less/variables.less",
                search: true,
                page: false,
                limit: 1000,
                cellWidth: '10%'
            });
        }
        //不同类型菜单显示
        var typeTplUpdate = function(type) {
            $(".layui-form-item").removeClass('layui-hide');
            if (type == 0) {
                $(".menu-route").addClass('layui-hide');
                $(".menu-perms").addClass('layui-hide');
            }
            if (type == 2) {
                $(".menu-icon").addClass('layui-hide');
                $(".menu-route").addClass('layui-hide');
                $(".menu-order").addClass('layui-hide');
            }
        }
        form.on('radio(menuType)', function(data){
            typeTplUpdate(data.value);
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var params = data.field;
            params.icon = data.field.icon ? 'fa ' + data.field.icon : '';
            params.menuId = parent.formDataId || null;
            var method = parent.formDataId > 0 ? 'update' : 'save';
            submitFormData('sys/menu/'+method, params, function (rs) {
                _parent.table.reload();
                _parent.loadMenuData();
            });

            return false;
        });

    });
</script>
</body>
</html>